<template>
  <div class="content">
    <e-heading grade='1'>教练详情</e-heading>
      <el-row>
        <el-col :span="24">
          <e-avatar class="avatar" :src="train_coach_info.photo" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>姓名：{{train_coach_info.name}}</p>
            <p>性别：{{train_coach_info.sex === 1 ? '男' : '女'}}</p>
            <p>出生日期：{{train_coach_info.birthday ? new Date(train_coach_info.birthday).format('yyyy-MM-dd') : '待完善'}}</p>
            <p>联系手机：{{train_coach_info.mobile}}</p>
            <p>执教年限：{{train_coach_info.teachYear === '' ? '待完善' : `${train_coach_info.teachYear}年`}}</p>
            <p>机构认证：{{train_coach_info.orgAuthority ? train_coach_info.orgAuthority : '待完善'}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>国籍：{{train_coach_info.country}}</p>
            <p>所在省市：{{train_coach_info.province}}-{{train_coach_info.city}}</p>
            <p>证件号码：{{train_coach_info.idNo}}</p>
            <p>证书：{{train_coach_info.certificateName ? train_coach_info.certificateName : '待完善'}}</p>
            <p>备注：{{train_coach_info.remark ? train_coach_info.remark : '无'}}</p>
          </div>
        </el-col>
      </el-row>

    <div class="main">
      <div class="divide"></div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="授课课程" name="first">
          <div class="coach-detail-table" v-if="train_coach_course.list&&train_coach_course.list.length">
            <el-table
              :data="train_coach_course.list"
              style="width: 100%"
              stripe
              >
              <el-table-column
                label="序号" align="center">
                <template slot-scope="scope">
                  {{scope.$index + 1 + (train_coach_course.page - 1) * 15}}
                </template>
              </el-table-column>
              <el-table-column
                prop="courseName"
                label="课程名称"
                :show-overflow-tooltip="true"
                align="center" 
                width="170">
                <template slot-scope="scope">
                  <span :class="['state_sred','state_green','state_warn'][scope.row.properties]"></span>{{ scope.row.courseName }}
                </template>
              </el-table-column>
              <el-table-column
                prop="schoolName"
                label="校区" 
                :show-overflow-tooltip="true"
                align="center" 
                width="190">
              </el-table-column>
              <el-table-column
                prop="classNum"
                label="未开课" 
                align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.classNumNoStart ? scope.row.classNumNoStart : 0}}个班</div>
                  <div>共{{scope.row.studentNumNoStart ? scope.row.studentNumNoStart : 0}}人</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="classNum"
                label="上课中" 
                align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.classNumIsGoing ? scope.row.classNumIsGoing : 0}}个班</div>
                  <div>共{{scope.row.studentNumIsGoing ? scope.row.studentNumIsGoing : 0}}人</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="classNum"
                label="已上完" 
                align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.classNumIsEnd ? scope.row.classNumIsEnd : 0}}个班</div>
                  <div>共{{scope.row.studentNumIsEnd  ? scope.row.studentNumIsEnd : 0}}人</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="studentNum"
                label="学生总人次" 
                align="center">
                <template slot-scope="scope">
                  {{scope.row.studentNumNoStart + scope.row.studentNumIsGoing + scope.row.studentNumIsEnd}}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-bind="getPaginationProps(train_coach_course)"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              >
            </el-pagination>
          </div>
          <e-placeholder v-else text="暂无课程" src="/static/images/training/no_course.png" />
        </el-tab-pane>
        <el-tab-pane label="教练简介" name="second">
          <div class="coach-content">
            <p style="line-height: 1.75; padding-top: 60px;">{{train_coach_info.intro}}</p>
            <e-preview-box>
              <e-swiper
                height="250px"
                :slides="4">
                <e-swiper-item v-for="(item, index) in train_coach_info.certificateImages" :key="index">
                    <img class="carousel-img" v-bind:src="item">
                </e-swiper-item>
              </e-swiper>
            </e-preview-box>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
import {ESwiper, ESwiperItem} from '@e-ui/swiper'
export default {
  mixins: [pagingList],
  components: {
    ESwiper,
    ESwiperItem
  },
  computed: {
    ...mapGetters({
      train_coach_course: 'train_coach_course', // 授课课程
      train_coach_info: 'train_coach_info' // 教练信息
    })
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  created () {
    this.$store.dispatch('train_coach_course', {teacherId: this.$route.params.id})
    this.$store.dispatch('train_coach_info', {teacherId: this.$route.params.id})
  }
}
</script>

<style lang="scss" scoped>

.content {
  .el-row {
    p {
      padding-bottom: 20px;
      line-height: 20px;
    }
    div{
      margin-bottom: 20px;
      .avatar{
        width:92px;
        height: 92px;
      }
    }
  }
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid $color-background;
    }
    .coach-detail-table {
      margin-top: 20px;
    }
    .el-tabs {
      padding-top: 30px;
      .el-tabs__header {
        margin: 0px;
      }
      .state_green,
      .state_sred,
      .state_warn{
        display: inline-block;
        margin-top:-8px;
        background:#0ab885;
        color:#fff;
        height:16px;
        width:16px;
        line-height: 16px;
        text-align: center;
        margin-right: 3px;
        &::after{
          content: '综'
        }
      }
      .state_sred{
        background:#ff6465;
        &::after{
          content: '专'
        }
      }
      .state_warn{
        background:rgb(140, 64, 190);
        &::after{
          content: '次'
        }
      }
    }
  }
}
</style>
